<template>
	<view class="p-top20 p-bot30" :style="{ '--color': color }">
		<navBar title="服务卡详情" :fromShare="fromShare"></navBar>
		<Sharer v-if="fromShare == 1" :pageData="share_member_info"></Sharer>
		<ServerItem :goods="goods" :item_use="item_use" :fromShare="fromShare" @popShow="Show = true"
			@getDetail="getTimeItemDetail"></ServerItem>
		<Records v-if="item_use.state == 1 && item_use.type == 1" :pageData="item_use"></Records>


		<Richtext :pageData="times_card_info.content"></Richtext>
		<Store :pageData="store_list" v-if="store_list.length"></Store>
		<view class="Pop" v-if="Show">
			<useNow :qr="qr" :use_code="item_use.use_code" :cardid="item_use.card_id" :item_id="item_use.item_id"
				:shop_id="shop_id" ref="useNow"></useNow>
			<view class="iconfont icon-guanbi white size60 p-top30" @click.stop="Show = false"></view>
		</view>
	</view>
</template>

<!-- type  1商品 2优惠券 3余额 4积分', -->
<script>
	import {
		mapState
	} from 'vuex';
	import Sharer from '@/subCard/components/Sharer.vue';
	import ServerItem from '@/subCard/components/ServerItem.vue';
	import useNow from '@/subCard/components/useNow.vue';
	import getNow from '@/subCard/components/getNow.vue';
	import Richtext from '@/subCard/components/Richtext.vue';
	import Store from '@/subCard/components/Store.vue';
	import Records from '@/subCard/components/Records.vue';
	export default {
		components: {
			Sharer,
			ServerItem,
			Records,
			useNow,
			getNow,
			Richtext,
			Store
		},
		data() {
			return {
				fromShare: 0,
				headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
				id: '',
				goods: '',
				item_use: '',
				times_card_info: '',
				store_list: [],
				qr: '',
				shop_id: '',
				share_member_info: '',
				Show: false,
			};
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id;
			if (opt.fromShare) this.fromShare = opt.fromShare;
			if (opt.shop_id) this.shop_id = opt.shop_id;
		},
		onShow() {
			this.getTimeItemDetail();
			if (this.item_use) this.$refs.useNow.getDeliveryInfo();
			// #ifdef MP-WEIXIN
			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				this.getTimeItemDetail()
				this.Show = false;
			}
			// #endif 
		},
		methods: {
			getTimeItemDetail() {
				this.$http.get({
					url: '/TimeCardApi/getTimeItemDetail',
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;

					this.qr = result.qr;
					this.goods = result.goods;
					this.item_use = result.item_use_log_find;
					this.times_card_info = result.times_card_info;
					this.store_list = result.store_list || [];
					if (result.share_member_info) this.share_member_info = result.share_member_info

				})
			}
		},
		computed: {
			...mapState(['color', 'vid', 'share_v_id'])
		},
		onShareAppMessage(res) {
			return {
				title: `${this.goods.name}`,
				path: `/pages/index/index?id=${this.id}&pageType=32&share_v_id=${this.vid}`, // 动态设置跳转路径
				imageUrl: `${this.goods.img}` // 分享图片链接
			};
		}
	};
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.Pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		inset: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>